<template>
  <div class="goodsDetail">
    <div class="title">青海油田公司废旧物资交接凭单</div>
    <div class="goodsDetail-border">
      <div class="border-div">
        {{ formatDate(formInfo.ScrapDate) }}
      </div>
    </div>
    <div class="tableDetail">
      <div></div>
      <el-table
        :data="tableData"
        :header-cell-style="headerCellStyle"
        style="width: 1400px"
      >
        <el-table-column
          align="center"
          :label="translate('序号')"
          type="index"
          width="80"
        />
          <el-table-column align="center" :label="translate('类别')" prop="ItemCate" width="100"/>
          <el-table-column align="center" :label="translate('物资名称')" prop="ItemName" width="152"/>
          <el-table-column align="center" :label="translate('计量单位')" prop="ItemUnit" width="90"/>
          <el-table-column align="center" :label="translate('数量')" prop="Qty1" width="80" />
          <el-table-column align="center" :label="translate('车牌')" prop="Qty2" width="85" />
          <el-table-column align="center" :label="translate('皮重')" prop="Qty3" width="85" />
          <el-table-column align="center" :label="translate('毛重')" prop="Qty4" width="80" />
          <el-table-column align="center" :label="translate('净重')" prop="Qty5" />
          <el-table-column align="center" :label="translate('移交单位')">
            <el-table-column align="center" :label="translate('计量人')" prop="ItemProperty" width="120"/>
          </el-table-column>
          <el-table-column align="center" :label="translate('接受单位')" width="160">
            <el-table-column align="center" :label="translate('计量人')" prop="ItemName" width="80"/>
            <el-table-column align="center" :label="translate('监督人')" prop="ItemUnit" width="80"/>
          </el-table-column>
          <el-table-column  align="center" :label="translate('备注')" prop="Remark" />
      </el-table>
    </div>
    <div class="bottom_border">
      <div class="flex_align">
        <div class="YJUnit">
          <div class="fontpd">{{ translate('移交单位') }}</div>
        </div>
        <div class="wb50 mr20">
        <div class="YJname">
          <span class="w150">移交单位名称：</span>
          <span>{{ formInfo.YJUnit }}</span>
        </div>
        <div class="YJname">
          <span class="w150">公章：</span>
          <span>{{ formInfo.YJGZ }}</span>
        </div>
        <div class="YJname">
          <span class="w150">经办人：</span>
          <span>{{ formInfo.YJPerson }}</span>
        </div>
      </div>
      <div class="JSUnit">
        <div class="fontpd">
          {{ translate('接受单位') }}
        </div>
      </div>
      <div class="wb50 mr20 pd80">
        <div class="YJname">
          <span class="w150">接受单位名称：</span>
          <span>{{ formInfo.JSUnit }}</span>
        </div>
        <div class="YJname">
          <span class="w150">公章：</span>
          <span>{{ formInfo.JSGZ }}</span>
        </div>
        <div class="YJname">
          <span class="w150">经办人：</span>
          <span>{{ formInfo.JSPerson }}</span>
        </div>
      </div>
      </div>
    </div>
    <div class="illustrate">
      <div>
        填表说明:本凭单适用于油田各单位废旧物资交接，一式两份。废旧物资按物资属性分类移交计里，交接双方分类填写物资数里、名称，可在备注中对物资现状进行描述。
      </div>
      <div>
        废旧物资按属性分类为:金属(废钢铁类、有色金类)类、非金类、装类、杂品类。1、废钢铁类:生产维护产生的废旧钢铁金属材料，如废旧阀门、管线、工具等。2、有色金属类:含有铜、铝等金属的废旧材料，如废旧电机、铜、铝制品及电力电缆等，不包括光纤、数字电缆等。
        3、丰金属类:不含金属的废旧物资，如塑料、纸制品等，不包玻瑞、织物、木桌椅及废旧办公耗材制品。4、包装物类:包装原材料的物品，如铁桶、塑料桶等，不包括危险化学品包装制品。5、杂品类:废旧电子、电器、金属与非金属复合村料。
      </div>
    </div>
  </div>
</template>
<script>
  import { translate } from '@/i18n'
  export default {
    name: 'Detail',
    components: {},
    props: {
      form: {
        type: Object,
        default: () => {
          return {}
        },
      },
      fromprint: {
        type: String,
        default: '',
      },
      chileddetail: {
        type: Array,
        default: () => {
          return []
        },
      },
      supplierdata: {
        type: Array,
        default: () => {
          return []
        },
      },
      isprint: {
        type: Boolean,
        default: false,
      },
    },
    emits: ['deletedchild'],
    data() {
      return {
        ItemList: [],
        itemChiledList: [],
        WmsData: [], // 选择物资数据
        formInfo: this.form,
        layout: 'total, sizes, prev, pager, next, jumper',
        pageNo: 1,
        pageSize: 10,
        radio: '',
        options: [],
        deleArr: [],
        tableData: this.chileddetail,
        searchChild: '',
        IsPrint: this.isprint,
        headerCellStyle: {
          background: '#ffffff !important',
          color: '#000000',
          'border-bottom': '1px solid #000000',
        },
      }
    },
    watch: {
      chileddetail(val) {
        console.log(val)
        this.tableData = val
      },
      form(val) {
        this.formInfo = val
      },
    },
    methods: {
      formatDate() {
        console.log(this.form.ScrapDate)
        if(this.form.ScrapDate){
          const today = new Date(this.form.ScrapDate)
          const year = today.getFullYear()
          const month = String(today.getMonth() + 1).padStart(2, '0')
          const day = String(today.getDate()).padStart(2, '0')
          return `${year}年${month}月${day}日`
        }else {
          return ''
        }

      },
      translate(row) {
        return translate(row)
      },
    },
  }
</script>
<style lang="scss" scoped>
  .goodsDetail {
    font-size: 16px;
    min-height: 600px;

    .goodsDetail-border {
      width: 1290px;
      margin: auto;
      text-align: center;
      // border: 1px solid #000000;
      .border-div {
        // border-bottom: 1px solid;
        height: 60px;
        padding: 10px;
      }
      .border-div:last-child {
        border: none;
      }
    }
  }
  .flex_align {
    display: flex;
    align-items: center;
  }
  .tableDetail {
    padding: 10px;
    .button-add {
      text-align: end;
      padding: 10px;
    }
  }
  .mr20 {
    // margin-right: 20px;
  }
  .w130 {
    display: inline-block;
    width: 130px;
    text-align: right;
  }
  .w150 {
    display: inline-block;
    width: 130px;
    text-align: right;
  }
  .w320 {
    display: inline-block;
    width: 180px !important;
  }
  .mt20 {
    margin-top: 20px;
  }
  .mr10 {
    margin-right: 10px;
  }
  .title {
    text-align: center;
    font-size: 16px;
    font-weight: 600;
  }
  .YJUnit {
    display: inline-block;
    width: 30px;
    padding: 20px 2px;
    font-size: 16px;
    font-weight: 600;
    border-right: 1px solid;
    height: 160px;
    width: 92px;
    .fontpd {
      padding: 24px;
      text-align: center;
    }
  }
  .JSUnit {
    display: inline-block;
    width: 30px;
    padding: 20px 2px;
    font-size: 16px;
    font-weight: 600;
    border-right: 1px solid #000;
    height: 160px;
    width: 92px;
    margin-left: 67px;
    border-left: 1px solid #000;
    .fontpd {
      padding: 24px;
      text-align: center;
    }
  }
  .YJname {
    padding: 20px 0;
  }
  .wb50 {
    width: 50%;
  }
  .pd80 {
    // padding-left: 80px;
  }
  .bottom_border {
    border: 1px solid #000;
    width: 1278px;
    margin: auto;
    margin-top: -20px;
  }
  .illustrate {
    padding: 20px;
    // border-top: 1px solid #999;
  }
  ::v-deep .el-scrollbar__wrap {
    overflow-x: auto;
    height: calc(100% + 20px); //多出来的20px是横向滚动条默认的样式
  }
  ::v-deep .el-table--scrollable-x .el-table__body-wrapper {
    overflow-x: hidden;
  }
  ::v-deep .el-table__inner-wrapper {
    border: 1px solid #000 !important;
  }

  /**
改变边框颜色
 */
  ::v-deep .el-table--border,
  .el-table--group {
    border-collapse: collapse;
    border: 1px solid #000 !important;
  }
  /**
改变表格内竖线颜色
 */
  ::v-deep .el-table--border td,
  .el-table--border th,
  .el-table__body-wrapper
  .el-table__inner-wrapper
    .el-table--border.is-scrolling-left
    ~ .el-table__fixed {
    border-collapse: collapse;
    border-right: 1px solid #000 !important;
  }
  /**
改变表格内行线颜色
 */
  ::v-deep .el-table td,
  .el-table th.is-leaf {
    border-collapse: collapse;
    border-bottom: 1px solid #000 !important;
  }

  ::v-deep .el-table thead tr th {
    border-collapse: collapse;
    border-color: #000;
  }
  /* g改变表头字体颜色 */
  ::v-deep .el-table thead {
    color: #000000;
  }

  @media print {
    @page {
      page-size: A4;
      margin: 5mm;
    }
    .el-table {
      border-collapse: collapse;
      border: 1px solid #000 !important; /* 设置表格边框样式 */
      page-break-inside: avoid;
    }
    .el-table__row {
      border-bottom: 1px solid #000 !important; /* 设置行边框样式 */
    }
    .el-table__cell {
      border-right: 1px solid #000 !important; /* 设置单元格边框样式 */
      border-left: 1px solid #000 !important; /* 设置单元格边框样式 */
    }
    .el-table thead tr {
      border: 1px solid #000 !important;
    }
    .el-table thead tr th {
      border: 1px solid #000 !important;
    }
    .el-table td,
    .el-table th.is-leaf {
      // border-bottom: 1px solid #000 !important;
    }
    .el-table__inner-wrapper {
      border-right: 1px solid #000 !important;
    }

    .goodsDetail {
      /* margin: 20cm; */
      // margin: 0 auto;
      /* 打印时缩放，防止页面溢出 */
      zoom: 0.89;
    }
    .YJUnit {
    display: inline-block;
    width: 30px;
    padding: 20px 2px;
    font-size: 16px;
    font-weight: 600;
    border-right: 1px solid;
    height: 160px;
    width: 92px;
    .fontpd {
      padding: 24px;
      text-align: center;
    }
  }
  .JSUnit {
    display: inline-block;
    width: 30px;
    padding: 20px 2px;
    font-size: 16px;
    font-weight: 600;
    border-right: 1px solid #000;
    height: 160px;
    width: 92px;
    margin-left: 77px;
    border-left: 1px solid #000;
    .fontpd {
      padding: 24px;
      text-align: center;
    }
  }
    .bottom_border {
      border: 1px solid #000 !important;
      width: 1268px;
      margin: auto;
      margin-top: -20px;
  }
    .cover {
      display: block;
    }
    tr {
      /* 行被截断时自动换行 */
      page-break-before: always;
      page-break-after: always;
      page-break-inside: avoid;
    }
    .el-table--border,
    .el-table--group {
      border-collapse: collapse;
      border: 1px solid #000 !important;
    }
  }
</style>
<style>
  @media print {
    .el-table {
      border-collapse: collapse;
      border: 1px solid #000 !important; /* 设置表格边框样式 */
    }
    .el-table td,
    .el-table th {
      border-bottom: 1px solid #000 !important;
    }
  }
</style>
